﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}

<script src="~/lib/axios.js"></script>
<script src="~/lib/vue.js"></script>


<div id="app">
    <form>
        <div><label>事项标题：</label><input type="text" v-model="formModel.title" /></div>

        <div><label>事项图片：</label><input type="file" v-on:change="handleFileChange" /></div>

        <div><label>开始时间：</label><input type="date" v-model="formModel.startTime" /></div>
        <div><label>结束时间：</label><input type="date" v-model="formModel.endTime" /></div>

        <input type="button" v-on:click="add" value="提交" />
        <input type="reset" value="重置" />
    </form>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: { //定义页面中使用的数据

            files: [],      //文件列表
            formModel: {    //表单模型（重要：里面的字段名称和数据库表的名称必须一致）
                title: '',
                startTime: '',
                endTime:'',
                filePath: '', //上传之后添加的相对路径
            }
        },
        methods: { //写方法

            //实现文件上传，并接口返回的图片路径
            handleFileChange(e) {
                //1.调试输出
                console.log(e.target.files);
                //2. 赋值给数据对象files
                this.files = e.target.files;

                //生成post请求所需要的data数据
                var data = new FormData();
                data.append("file", this.files[0]);

                //调用API接口，进行删除
                axios({
                    url: 'https://localhost:5001/api/Item/UploadImg',//api接口地址
                    method: 'POST',
                    data: data
                }).then((res) => { //api调用成功之后的回调函数

                    //1. 调试一下是否拿到了数据
                    console.log(res.data);
                    if (res.data.result > 0) {
                        this.formModel.filePath = res.data.uploadPath;
                        alert(this.formModel.filePath)
                    }
                    alert(res.data.msg);
                });
            },
            add() {
                //1.调试输出
                console.log("add方法进来了")
                console.log(this.formModel);

                //调用API接口，进行删除
                axios({
                    url: 'https://localhost:5001/api/Item/Create',//api接口地址
                    method: 'POST',
                    data: this.formModel
                }).then((res) => { //api调用成功之后的回调函数
                    //1. 调试一下是否拿到了数据
                    console.log(res.data);
                    if (res.data.result > 0) {
                        //跳转
                        location.href = "Index";
                    }

                    alert(res.data.msg);
                });
            }
        },
        mounted() {  //第一次加载事件
            
        }
    });

</script>